<div class="scoped-modal" style="display:block">
    <div class="modal-dialog" role="document">
    <div class="modal-content neo-modal">
        <div class="modal-body text-center overflow-y-inherit">
            <button type="button" class="close" data-bind="click: closeClicked, visible: canClose" data-dismiss="modal" aria-label="Close"><i class="icon-cancel"></i></button>
            
            <img src="../../../../Content/img/sharding/shard.png" alt="Shard" class="img-responsive margin-center" style="width: 70px" />
            <h2 class="text-capitalize margin-top">Select Shard</h2>
            <p>
                This view can display data only for a single shard.<br>
                Select a shard to view:
            </p>
            <div class="flex-horizontal flex-content-center margin-top">
                <div data-bind="with: $root.selector">
                    <div data-bind="compose: { model: $root.selector }"></div>
                </div>
                <div>
                    <button class="btn btn-info" data-bind="click: shardSelected">
                        View <i class="icon-arrow-thin-right margin-left-sm"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
